<template>
  <view>
    <base-drawer mode="bottom" :visible="visible" background-color="transparent" mask maskClosable @close="closeDrawer">
      <view class="w-full bg--w111-fff rd-t-40rpx py-32">
        <view class="text-center fs-30 text--w111-333 fw-500">成色评级标准</view>
        <view class="px-32">
          <view class="params-box rd-24rpx bg--w111-fff mt-20">
            <view class="item flex  text-center" v-for="(item,index) in list">
              <view class="l">{{item.name}}</view>
              <view class="r">{{item.desc}}</view>
            </view>
          </view>
          <view class="tip px-20 ">
            说明：成色评级仅供参考，不完全与商品价格成正比，配件是否齐全不作为评级标准，配件以详情图中展示的为准。
          </view>
        </view>
        <view class="mx-20 pb-safe">
          <view class="mt-52 h-72 flex-center rd-36px bg-color  text--w111-fff" @click="closeDrawer">我知道了</view>
        </view>
      </view>
    </base-drawer>
  </view>
</template>
<script>
import baseDrawer from '@/components/tui-drawer/tui-drawer.vue';
import {getOldList} from "@/api/order";
export default {
  props:{
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components:{
    baseDrawer
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getList()
  },
  methods:{
    closeDrawer() {
      this.$emit('closeDrawer');
    },
    getList(){
      getOldList().then(res=>{
        if(res.status===200){
          this.list=res.data.data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.params-box{
  padding: 20rpx;
  min-height: 40vh;
  max-height: 50vh;
  overflow-y: auto;
  .item{
    margin-bottom: 4rpx;
    .l,.r{
      background: #f4f4f4;
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .l{
      padding: 0 30rpx;
      flex-basis: 150rpx; /* 初始宽度 */
      flex-shrink: 0; /* 防止缩小 */
      margin-right: 4rpx;
      font-weight: bold;
      color: #333;
    }
    .r{
      flex-grow: 1;
      padding: 0 100rpx !important;
    }
  }
}
</style>
